
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <!-- <link rel="stylesheet" href="demo.css"> -->
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-weizhi"></i>
                    <div class="name">位置</div>
                    <div class="fontclass">.icon-weizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shebeimoxing"></i>
                    <div class="name">设备模型</div>
                    <div class="fontclass">.icon-shebeimoxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xianchangjiankong1"></i>
                    <div class="name">现场监控</div>
                    <div class="fontclass">.icon-xianchangjiankong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yangchen"></i>
                    <div class="name">扬尘</div>
                    <div class="fontclass">.icon-yangchen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wendu"></i>
                    <div class="name">温度</div>
                    <div class="fontclass">.icon-wendu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shidu"></i>
                    <div class="name">湿度</div>
                    <div class="fontclass">.icon-shidu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongdibuju"></i>
                    <div class="name">监测点布局</div>
                    <div class="fontclass">.icon-gongdibuju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongdiguanli_sanji"></i>
                    <div class="name">监测点管理_三级</div>
                    <div class="fontclass">.icon-gongdiguanli_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiahao"></i>
                    <div class="name">加号</div>
                    <div class="fontclass">.icon-jiahao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongdiguanli"></i>
                    <div class="name">监测点管理</div>
                    <div class="fontclass">.icon-gongdiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongnengpeizhi"></i>
                    <div class="name">功能配置</div>
                    <div class="fontclass">.icon-gongnengpeizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongdibuju_sanji"></i>
                    <div class="name">监测点布局_三级</div>
                    <div class="fontclass">.icon-gongdibuju_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiancedian"></i>
                    <div class="name">监测点</div>
                    <div class="fontclass">.icon-jiancedian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiancedian_sanji"></i>
                    <div class="name">监测点_三级</div>
                    <div class="fontclass">.icon-jiancedian_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianceleixing"></i>
                    <div class="name">监测类型</div>
                    <div class="fontclass">.icon-jianceleixing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiancezu"></i>
                    <div class="name">监测组</div>
                    <div class="fontclass">.icon-jiancezu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianceleixing_sanji"></i>
                    <div class="name">监测类型_三级</div>
                    <div class="fontclass">.icon-jianceleixing_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiancezu_sanji"></i>
                    <div class="name">监测组_三级</div>
                    <div class="fontclass">.icon-jiancezu_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianhao"></i>
                    <div class="name">减号</div>
                    <div class="fontclass">.icon-jianhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoseguanli"></i>
                    <div class="name">角色管理</div>
                    <div class="fontclass">.icon-jiaoseguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lishishuju"></i>
                    <div class="name">历史数据</div>
                    <div class="fontclass">.icon-lishishuju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingjiaguanli"></i>
                    <div class="name">评价管理</div>
                    <div class="fontclass">.icon-pingjiaguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingjiaguanli_sanji"></i>
                    <div class="name">评价管理_三级</div>
                    <div class="fontclass">.icon-pingjiaguanli_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingjiajieduan"></i>
                    <div class="name">评价阶段</div>
                    <div class="fontclass">.icon-pingjiajieduan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingjiamingxi"></i>
                    <div class="name">评价明细</div>
                    <div class="fontclass">.icon-pingjiamingxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingjiapeizhi"></i>
                    <div class="name">评价配置</div>
                    <div class="fontclass">.icon-pingjiapeizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lishishuju_sanji"></i>
                    <div class="name">历史数据_三级</div>
                    <div class="fontclass">.icon-lishishuju_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renyuanguanli"></i>
                    <div class="name">人员管理</div>
                    <div class="fontclass">.icon-renyuanguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingjiayaosu"></i>
                    <div class="name">评价要素</div>
                    <div class="fontclass">.icon-pingjiayaosu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shishishuju"></i>
                    <div class="name">实时数据</div>
                    <div class="fontclass">.icon-shishishuju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shexiangtouguanli_sanji"></i>
                    <div class="name">摄像头管理_三级</div>
                    <div class="fontclass">.icon-shexiangtouguanli_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shishishuju_sanji"></i>
                    <div class="name">实时数据_三级</div>
                    <div class="fontclass">.icon-shishishuju_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghuguanli"></i>
                    <div class="name">账户管理</div>
                    <div class="fontclass">.icon-zhanghuguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangmuguanli_sanji"></i>
                    <div class="name">区域管理_三级</div>
                    <div class="fontclass">.icon-xiangmuguanli_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yujingpeizhi_sanji"></i>
                    <div class="name">预警配置_三级</div>
                    <div class="fontclass">.icon-yujingpeizhi_sanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zongbaofenbaodanwei"></i>
                    <div class="name">总包分包单位</div>
                    <div class="fontclass">.icon-zongbaofenbaodanwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangmuguanli"></i>
                    <div class="name">区域管理</div>
                    <div class="fontclass">.icon-xiangmuguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuzhijiagouguanli"></i>
                    <div class="name">组织架构管理</div>
                    <div class="fontclass">.icon-zuzhijiagouguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuzhirenyuan"></i>
                    <div class="name">组织人员</div>
                    <div class="fontclass">.icon-zuzhirenyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuichu"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-tuichu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghuguanliyuan"></i>
                    <div class="name">用户管理员</div>
                    <div class="fontclass">.icon-yonghuguanliyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiancezu2"></i>
                    <div class="name">监测组</div>
                    <div class="fontclass">.icon-jiancezu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shexiangtou1"></i>
                    <div class="name">摄像头</div>
                    <div class="fontclass">.icon-shexiangtou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xianchangbujuguanli"></i>
                    <div class="name">现场布局管理</div>
                    <div class="fontclass">.icon-xianchangbujuguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangda"></i>
                    <div class="name">放大</div>
                    <div class="fontclass">.icon-fangda</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianceshebeiguanli"></i>
                    <div class="name">监测设备管理</div>
                    <div class="fontclass">.icon-jianceshebeiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangchuan"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-shangchuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baocunbujutu"></i>
                    <div class="name">保存布局图</div>
                    <div class="fontclass">.icon-baocunbujutu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-suoxiao"></i>
                    <div class="name">缩小</div>
                    <div class="fontclass">.icon-suoxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qixiang"></i>
                    <div class="name">气象</div>
                    <div class="fontclass">.icon-qixiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingjiashenhehuizong"></i>
                    <div class="name">评价审核汇总</div>
                    <div class="fontclass">.icon-pingjiashenhehuizong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-picipingjiashenhehuizong"></i>
                    <div class="name">批次评价审核汇总</div>
                    <div class="fontclass">.icon-picipingjiashenhehuizong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danweigongchengpingjiashenhehuizong"></i>
                    <div class="name">单位工程评价审核汇总</div>
                    <div class="fontclass">.icon-danweigongchengpingjiashenhehuizong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yaosupingjiashenhehuizong"></i>
                    <div class="name">要素评价审核汇总</div>
                    <div class="fontclass">.icon-yaosupingjiashenhehuizong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jieduanpingjiashenhehuizong"></i>
                    <div class="name">阶段评价审核汇总</div>
                    <div class="fontclass">.icon-jieduanpingjiashenhehuizong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cedianchaxun"></i>
                    <div class="name">测点查询</div>
                    <div class="fontclass">.icon-cedianchaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cediantongji"></i>
                    <div class="name">测点统计</div>
                    <div class="fontclass">.icon-cediantongji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zaoyin"></i>
                    <div class="name">噪音</div>
                    <div class="fontclass">.icon-zaoyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yangchen1"></i>
                    <div class="name">扬尘</div>
                    <div class="fontclass">.icon-yangchen1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipin"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-shipin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongwaianquan"></i>
                    <div class="name">红外安全</div>
                    <div class="fontclass">.icon-hongwaianquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paifangshui"></i>
                    <div class="name">排放水</div>
                    <div class="fontclass">.icon-paifangshui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youyan"></i>
                    <div class="name">油烟</div>
                    <div class="fontclass">.icon-youyan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongdanliebiao"></i>
                    <div class="name">工单列表</div>
                    <div class="fontclass">.icon-gongdanliebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shishiweizhi-copy"></i>
                    <div class="name">实时位置</div>
                    <div class="fontclass">.icon-shishiweizhi-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaiweijianwei"></i>
                    <div class="name">拆违建违</div>
                    <div class="fontclass">.icon-chaiweijianwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chengguangongzuo"></i>
                    <div class="name">城管工作</div>
                    <div class="fontclass">.icon-chengguangongzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hechangzhigongzuo"></i>
                    <div class="name">河长制工作</div>
                    <div class="fontclass">.icon-hechangzhigongzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenmingchuangjian"></i>
                    <div class="name">文明创建</div>
                    <div class="fontclass">.icon-wenmingchuangjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huanbaogongzuo"></i>
                    <div class="name">环保工作</div>
                    <div class="fontclass">.icon-huanbaogongzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuiwugongzuo"></i>
                    <div class="name">水务工作</div>
                    <div class="fontclass">.icon-shuiwugongzuo</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入区域下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你区域下的font-family。可以通过编辑区域查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
